<template>
  <el-dialog
    :title="title"
    :visible.sync="$attrs.visable"
    width="560px"
    :before-close="handleClose"
    append-to-body
  >
    <div class="f-14 infobox">
      <i class="el-icon-info c_primary f-16 mr-8"></i>
      仅支持自动获取公众号文章的标题/描述/封面
    </div>
    <el-form :model="form" :rules="rules" ref="form" label-width="60px" class="ruleForm mt-20" label-position="left">
      <el-form-item label="链接:" prop="link">
        <el-input size="small" v-model="form.link" class='linkinput' placeholder="请输入以http://或https://开头的网址">
          <el-button type="primary" slot="append">获 取</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="标题:" prop="title">
        <el-input size="small" v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-row :gutter="15">
        <el-col :span="18">
          <el-form-item label="描述:" prop="title">
            <el-input size="small" v-model="form.title" type="textarea" placeholder="请输入描述" rows="5" maxlength="200"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="src" label-width="0">
            <ImageUpload v-model="form.src" :limit='1' type='small' :isShowTip='false' />
          </el-form-item>
        </el-col>
      </el-row>
      
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { emoji } from "@/assets/icons/emoji.js";
export default {
  data() {
    return {
      loading: false,
      form: {},
      rules:{},

      text: "",
      emoji: emoji, //表情包
    };
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    selectItem:{
       type:Object,
       default:null
    }
  },
  created(){
    if(this.selectItem){
      this.text = this.selectItem.message
    }
  },
  methods: {
    handleClose() {
      this.$emit("close",5); //关闭弹窗;
    },

    handleCopy(){
        this.copy(this.text)
    },

    //选择表情包
    chooseEmoji(icon){
        var elInput=document.getElementById("messageInput");
        var startPos=elInput.selectionStart;
        var endPos=elInput.selectionEnd;
        var text=elInput.value;
        if(startPos ===undefined ||endPos ===undefined){
            return;
        }
        var result=text.substring(0,startPos) + icon.name + text.substring(endPos);
        //重新定义光标位置
        elInput.focus();
        elInput.selectionStart=startPos+icon.name.length;
        elInput.selectionEnd=startPos +icon.name.length;
        elInput.value=result;
        this.text=result;
    },

    handleSubmit(){
       if(!this.text){
        this.$message.warning('输入不能为空')
        return
       }
        this.$emit('submit',this.text)
    },
  },
};
</script>
<style lang="scss" scoped>
.infobox{
  position: absolute;
  top: 49px;
  left: 0;
  right: 0;
  background-color: #f0f7ff;
  padding: 8px 15px;
}
.el-form-item{
  margin-bottom: 20px;
}
.linkinput{
  ::v-deep .el-input-group__append{
    background-color:#3b74ff;
    color: #fff;
  }
}

</style>